{% extends 'base.html' %}
{% load thumbnail %}

{% block content %}
    <div class="main">
        <h2>{{ user.username|title }}</h2>
        <div class="line"></div>
        <div class="information">
            {% thumbnail user.profile.photo "250x250" crop="50%" as im %}
                <img src="{{ im.url }}">
            {% endthumbnail %} 
            <div class="information-main">
                <div class="followers">
                    <span class="btn btn-outline-light">{{ user.subscribers.count }} followers</span>
                    <button class="btn btn-outline-light">Subscribe</button>
                </div>
                <div class="images">
                    {% for image in images %}
                        {% thumbnail image.image "150x150" crop="50%" as im %}
                            <img src="{{ im.url }}">
                        {% endthumbnail %}                         
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <style>

        .images {
            margin: 5em 0 0 0;
        }

        .images img {
            margin: 0 1em 1em 0;
        }

        .main {
            padding: 2em;
        }

        .information-main {
            margin: 0 0 0 4em;
        }

        .information {
            display: flex;
        }

        img {
            border: 2px solid #DDD;
            border-radius: 50%;
        }

        .line {
            margin-bottom: 2.5em;
        }
    </style>
{% endblock content %}
